<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的隐藏与显示</title>
    <style>
        #o1 {
            /*隐藏元素*/
            display: none;
            /*以块级元素的方式展示*/
            /*  display: block;*/
            /*以行级元素的方式展示*/
            /*  display: inline;*/
            /*以行级元素的方式展示*/
            /*  display: inline-block;*/
        }

        #o2 {
            display: none;
        }

        #o3 {
            display: none;
        }

        #d1 {
            width: 300px;
            height: 300px;
            background-color: red;
            /*display: inline;*/
            display: inline-block;
        }

        #s1 {
            width: 300px;
            height: 300px;
            background-color: green;
            display: block;
        }
    </style>
</head>
<body>
<h2>第一章</h2>
<ol id="o1">
    <li>第1节</li>
    <li>第2节</li>
    <li>第3节</li>
</ol>
<h2>第二章</h2>
<ol id="o2">
    <li>第1节</li>
    <li>第2节</li>
    <li>第3节</li>
</ol>
<h2>第三章</h2>
<ol id="o3">
    <li>第1节</li>
    <li>第2节</li>
    <li>第3节</li>
</ol>
<hr>
<div id="d1">第1个div</div>
<div>第2个div</div>
<div>第3个div</div>
<hr>
<span id="s1">第1个span</span>
<span>第2个span</span>
<span>第3个span</span>
</body>
</html>